<template>
  <div class="container">
    <div class="page-top "></div>
    <div class="orderlist-detail">
      <div class="orderlist-detail-dz">
        <ul>
          <li>
            <div class="left"><p>出发</p></div>
            <div class="right">
              <h5><span>主订单姓名</span><em></em><span>18574722836</span></h5>
              <p class="dot">广东省深圳市龙华区这是一个测试广东省深圳市龙华区这是一个测试</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left"><p style="background-color: #fddbda;">到达</p></div>
            <div class="right">
              <h5><span>主订单姓名</span><em></em><span>18574722836</span></h5>
              <p class="dot">商家A上门地址</p>
            </div>
            <div style="clear: both"></div>
          </li>
        </ul>
      </div>
      <div class="orderlist-detail-ms">
        <ul>
          <li>
            <div class="left">
              <p>出行类型</p>
            </div>
            <div class="right">
              <p>国际出行</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>服务类型</p>
            </div>
            <div class="right cx-select" @click="show1 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>预计用时</p>
            </div>
            <div class="right">
              <p>1天</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>预计到达</p>
            </div>
            <div class="right">
              <p>2024年10月18号 00时 </p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>出行宠物</p>
            </div>
            <div class="right cx-select" @click="show2 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>宠物防疫号</p>
            </div>
            <div class="right cx-select" @click="show3 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>宠物防疫照片</p>
            </div>
            <div class="right cx-select" @click="show4 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>上门时间</p>
            </div>
            <div class="right cx-select" @click="show5 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>运输车辆</p>
            </div>
            <div class="right cx-select" @click="show6 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>宠物箱</p>
            </div>
            <div class="right cx-select" @click="show7 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>宠物保险</p>
            </div>
            <div class="right cx-select" @click="show8 = true">
              <p>请选择</p>
            </div>
            <div style="clear: both"></div>
          </li>
        </ul>
      </div>


    </div>
    <van-popup
      :show="show1"
      round
      closeable
      close-on-click-overlay
      lock-scroll
      position="bottom"
      @close="onclose"
      custom-style="height: 40%;background-color: #f6f7fb;">
      <div class="cx-select-cont">
        <ul class="select-tc">
          <van-radio-group :value="radio">
            <li>
              <h5><label>￥1</label> 普通出行 </h5>
              <p>预计用时:1天</p>
              <p>预计到达:2024年10月18号 00时</p>
              <div class="dw">
                <van-radio name="1" />
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <h5><label>￥1</label> 普通出行 </h5>
              <p>预计用时:1天</p>
              <p>预计到达:2024年10月18号 00时</p>
              <div class="dw">
                <van-radio name="2" />
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <h5><label>￥1</label> 普通出行 </h5>
              <p>预计用时:1天</p>
              <p>预计到达:2024年10月18号 00时</p>
              <div class="dw">
                <van-radio name="3" />
              </div>
              <div style="clear: both"></div>
            </li>
          </van-radio-group>
        </ul>
      </div>

    </van-popup>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

export default {
  name: "index",
  data() {
    // 这里存放数据
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      radio: '1'
    }
  },
  components: {},
  props: {},
  // 方法集合
  methods: {
    onclose() {
      this.show1 = false
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  //过滤器
  filters: {},
  // 生命周期 - 创建之前
  beforeCreate() {
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 生命周期 - 更新之前
  beforeUpdate() {
  },
  // 生命周期 - 更新之后
  updated() {
  },
  // 生命周期 - 销毁之前
  beforeDestroy() {
  },
  // 生命周期 - 销毁完成
  destroyed() {
  },
  // 如果页面有 keep-alive 缓存功能,这个函数会触发
  //进入的时候触发
  activated() {
  },
  //离开的时候触发
  deactivated() {
  },
}
</script>

<style>
@import "index.css";
</style>
